<script lang="ts" setup>
import {onMounted, ref} from 'vue'

import {useUserStore} from '@/stores/user'
import router from '@/router/index.js'
import {RegionFullSelects, RegionFullText} from "v-region";
import { ElMessage } from 'element-plus'
import {registerShopAPI,getUserShopAPI} from '@/apis/user'
const step = ref(0)
const shopForm=ref()

onMounted(()=>{
  //获取店铺信息
  getMyShop()

  if(useUserStore().myShop){
    step.value=3
  }
})

const getMyShop=()=>{
  getUserShopAPI(useUserStore().userInfo.uid).then(res=>{
    console.log(res)
    if(res.code===200){
      useUserStore().loadShop(res.data)
    }else if(res.code===400){
      useUserStore().loadShop()

    }
  })
}

const shopData=ref({
  shopName:'',
  realName:useUserStore().userInfo.realname||'',
  identityNum:useUserStore().userInfo.identityNum||'',
  region:{
    province:'',
    city:'',
    area:'',
    town:'',
  },
  address:''
})

const rules={
  shopName:[
    { type: 'string',required: true,message: "名称必填", trigger: 'blur'},
    {max: 20,message: "名称长度不能超过20位" }
  ],
  realName:[
    { type: 'string',required: true,message: "必填", trigger: 'blur'},
  ],
  identityNum:[
    { type: 'string',required: true,message: "必填", trigger: 'blur'},
  ],
  town:[
    { type: 'string',required: true,message: "请选择区域", trigger: 'blur'},
  ],
  address:[
    { type: 'string',required: true,message: "必填", trigger: 'blur'},
    {max: 20,message: "长度不能超过20位" }
  ],
}

const next = (form) => {
  form.validate(valid=>{
    if(valid){
      if(step.value==1&&!shopData.value.region.town){
        ElMessage({
          message: '请选择区域',
          type: 'warning',
        })
        return
      }
      step.value++
      if (step.value===3){
        //TODO register shop
        registerShop()
      }
    }else{
      console.log("error submit")
    }
  })
}

const registerShop=async ()=>{
  const shop={
    uid:useUserStore().userInfo.uid,
    shopName:shopData.value.shopName,
    shopAvatar:'',
    province: shopData.value.region.province,
    city: shopData.value.region.city,
    area: shopData.value.region.area,
    town: shopData.value.region.town,
    address: shopData.value.address
  }
  const res=await registerShopAPI(shop)
  console.log(res.code)
  if(res.code===200){
    shop.shopId=res.data.shopId
    useUserStore().loadShop(shop)
    console.log("恭喜激活成功")
  }
}

</script>

<template>
<div class="openShopPanel">
  <template v-if="true">
    <div class="stepBar">
    <el-steps style="width: 600px" :active="step" finish-status="success">
      <el-step title="填写店名" />
      <el-step title="填写主体信息" />
      <el-step title="激活店铺" />
    </el-steps>
    </div>

    <div v-show="!useUserStore().isAuth" style="margin-top: 60px">
      <h2>当前未实名，请先完成实名认证</h2>
      <el-button style="height: 40px;
      width: 300px;
      background-color: #39bf3e;
      color: white;
      border-radius: 10px;" @click="router.replace('/userCenter/home')">
        去实名
      </el-button>
    </div>

    <div class="formBox" v-show="useUserStore().isAuth">
      <el-form :model="shopData" ref="shopForm" style="margin-top: 20px" :rules="rules">
          <template v-if="step===0">
            <el-form-item label="店铺名称" prop="shopName">
              <el-input  v-model="shopData.shopName" style="width: 300px" placeholder="请输入店名"></el-input>
            </el-form-item>
          </template>
          <template v-else-if="step===1">
            <el-form-item label="真实姓名" prop="realName">
              <el-input  v-model="shopData.realName" disabled ></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="identityNum">
              <el-input  v-model="shopData.identityNum" disabled ></el-input>
            </el-form-item>
            <el-form-item label="所在区域" prop="realName">
              <RegionFullSelects  v-model="shopData.region"/>
            </el-form-item>
            <el-form-item label="详细地址" prop="address">
              <el-input v-model="shopData.address" placeholder="街道地址门牌号"></el-input>
            </el-form-item>
          </template>
          <template v-else-if="step===2">
            <el-descriptions title="店主身份" column="2">
              <el-descriptions-item label="真实姓名：">{{shopData.realName}}</el-descriptions-item>
              <el-descriptions-item label="身份证号：">{{shopData.identityNum}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="店铺信息" column="2">
              <el-descriptions-item label="店铺名字：">{{shopData.shopName}}</el-descriptions-item>
              <el-descriptions-item label="所在区域：">
                <RegionFullText  separator="" v-model="shopData.region" />
              </el-descriptions-item>
              <el-descriptions-item label="详细地址：">{{shopData.address}}</el-descriptions-item>
            </el-descriptions>
          </template>
        <template v-else-if="step===3">
          <el-result
              icon="success"
              title="恭喜"
              sub-title="您的店铺已成功激活"
          >
            <template #extra>
              <el-button type="primary" @click="router.push('/myShop')">查看我的店铺</el-button>
            </template>
          </el-result>
        </template>
      </el-form>
    <el-button class="nextBtn" @click="next(shopForm)" v-show="step<3">{{step===2?'确认无误，激活店铺':'下一步'}}</el-button>
      <br>
      <el-button class="preBtn" @click="step--" v-show="step>0&&step<3">上一步</el-button>
    </div>
  </template>
  <template v-else-if="false">
    专家
  </template>
</div>
</template>

<style scoped lang="less">
.openShopPanel{
  width: 990px;
  height: 600px;
  background-color: white;
  border-radius: 10px;
  padding: 50px 20px;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  align-content: stretch;
  gap: 5px
}
.formBox{
  margin-top: 50px;
  width: 800px;
  height: 500px;
  padding:20px;
  border-radius: 10px;
  //border: #39bf3e 2px solid;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}
.nextBtn{
  margin-top: 260px;
  height: 40px;
  width: 300px;
  background-color: #39bf3e;
  color: white;
  border-radius: 10px;
  position: absolute;
}

.preBtn{
  margin-top: 310px;
  height: 40px;
  width: 300px;
  background-color: rgb(255, 119, 0);
  color: white;
  border-radius: 10px;
  position: absolute;
}
</style>